<template>
	<view class="container">
		<uni-forms ref="form" :modelValue="info"  :rules="formRules" class="form" label-width="120">			
			<uni-forms-item label="资产分类" class="form-item">
				<view class="uni-input">{{info.cateName}}</view>
			</uni-forms-item>
			<uni-forms-item label="资产编码" class="form-item">
				<view class="uni-input">{{info.assetNum}}</view>
			</uni-forms-item>
			<uni-forms-item label="维修原由" class="form-item">
				<view class="uni-input">{{info.reason}}</view>
			</uni-forms-item>
			<uni-forms-item label="下单时间" class="form-item">
				<view class="uni-input">{{info.createTime}}</view>
			</uni-forms-item>			
			<template  v-if="action == 'view'">				
			<uni-forms-item label="维修图片" class="form-item" v-if="imageList">
				<view class="uni-input" @click="previewImgs">
					<image style="height: 200px; background-color: #eeeeee;" 
					mode="aspectFit" :src="imageList[0]"></image>
				</view>
			</uni-forms-item>	
			<uni-forms-item label="开始时间" class="form-item">
				<view class="uni-input">{{info.startTime}}</view>
			</uni-forms-item>		
			<uni-forms-item label="下单时间" class="form-item">
				<view class="uni-input">{{info.createTime}}</view>
			</uni-forms-item>		
			<uni-forms-item label="完成时间" class="form-item">
				<view class="uni-input">{{info.finishTime}}</view>
			</uni-forms-item>		
			<uni-forms-item label="维修结果" class="form-item">
				<view class="uni-input">{{dictTag('maintain_result', info.result)}}</view>
			</uni-forms-item>		
			<uni-forms-item label="维修费用" class="form-item">
				<view class="uni-input">{{info.money}}</view>
			</uni-forms-item>		
			<uni-forms-item label="维修说明" class="form-item">
				<view class="uni-input">{{info.comment}}</view>
			</uni-forms-item>	
			</template>			
			<template v-else>				
			<uni-forms-item label="维修图片" class="form-item">
				<view class="uni-input" @click="previewImgs" v-if="imageList">
					<image style="height: 200px; background-color: #eeeeee;" 
					mode="aspectFit" :src="imageList[0]"></image>
				</view>
				<view class="uni-input" v-else @click="previewImgs">点击上传</view>
			</uni-forms-item>
			
			<uni-forms-item label="开始时间" class="form-item" name="startTime" required>
				<uni-datetime-picker type="date" :value="info.startTime" @change="startChange"/>
			</uni-forms-item>
			<uni-forms-item label="完成时间" class="form-item" name="finishTime" required>
				<uni-datetime-picker type="date" :value="info.finishTime" @change="finishChange"/>
			</uni-forms-item>
			<uni-forms-item label="维修结果" required name="result">
				<view class="uni-padding-wrap">
					<view>
					<radio-group @change="checkChange">
						<template v-for="(o,i) in dictOptions['maintain_result']">							
							<label class="radio" v-if="o.dictValue != '0'">
								<radio :value="o.dictValue" :checked="info.result == o.dictValue" />
							{{o.dictLabel}}</label>
						</template>
					</radio-group>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="维修费用" class="form-item" name="money" required>
				<uni-easyinput type="digit" v-model="info.money" placeholder="请输入花费" />
			</uni-forms-item>
			<uni-forms-item label="维修说明" class="form-item" name="comment" required>
				<uni-easyinput v-model="info.comment" placeholder="请输入过程和结果说明" />
			</uni-forms-item>
			</template>
		</uni-forms>
		<button type="primary" v-if="action == 'form'" @click="handleSubmit('form')">提交维修结果</button>	
	</view>
</template>


<script>
	import { getMaintain, updateMaintain} from '@/api/maintain.js'
	import upload from '@/utils/upload.js'	
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { dictMixin } from '@/plugins/dict.js';
	export default {
		mixins: [dictMixin],
		data() {
			return {
				info: { },
				action: 'view',		
				imgItems: ['预览', '重新拍照'],
				imageLimit: 3,
				// 校验规则
				formRules: {
					startTime: {
						rules: [{
							required: true,
							errorMessage: '开始时间不能为空'
						}]
					},
					finishTime: {
						rules: [{
							required: true,
							errorMessage: '完成时间不能为空'
						}]
					},
					result: {
						rules: [{
							required: true,
							errorMessage: '维修结果不能为空'
						}]
					},
					money: {
						rules: [{
							required: true,
							errorMessage: '维修费用不能为空'
						}]
					},
					comment: {
						rules: [{
							required: true,
							errorMessage: '维修说明不能为空'
						}]
					}
				}
			}
		},
		onLoad() {
			this.useDict(['maintain_result']);
			
			getMaintain(this.$route.query.id).then(response => {
				this.info = response.data;				
			})
			
			if(this.$route.query.action){
				this.action = this.$route.query.action;
			}						
		},
		onReady() {			
			if(this.action == 'form'){					
				this.$refs.form.setRules(this.formRules)
			}
		},
		computed: {
			imageList() {
				if(!this.info.imgs){
					return null;
				}else { 
					return this.info.imgs.split(',').map(e=>baseUrl+e);
				}
			}
		},
		methods: {			
			checkChange(e){
				this.info.result = e.detail.value;
			},		
			startChange(e){
				this.info.startTime = e;
			},	
			finishChange(e){
				this.info.finishTime = e;
			},
			handleSubmit(ref) {
				let that = this;
					console.log(this.info)
				this.$refs[ref].validate().then(res => {
					updateMaintain(this.info).then(response => {
						that.$modal.msgSuccess('操作成功');
						//this.$tab.navigateBack();						
					});
				})
			},
			previewImgs() {
				if(this.imageList == null || this.imageList.length == 0){
					this.uploadImgs();
					return;
				}
				let that = this;
				uni.showActionSheet({
					itemList: this.imgItems,
					success: function (res) {
						if(res.tapIndex == 0){
							//预览
							uni.previewImage({
								current: 0,
								urls: that.imageList
							});
						}else{
							//上传
							that.uploadImgs();
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
				
			},
			uploadImgs() {
				let imgFiles = [];
				let that = this;
				uni.chooseImage({
					count: this.imageLimit, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: ['album'], //从相册选择
					success: function (res) {
						res.tempFilePaths.forEach(temp=>{
							upload({
							  url: '/common/upload',
							  name: "file",
							  filePath: temp
							}).then(response=>{
								imgFiles.push(response.fileName)
								that.info.imgs = imgFiles.join(',')
							})
						})
					}
				});
			}
		}
	}
</script>

<style>
	.form {
		padding: 15px;
		background-color: #fff;
	}
	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		place-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>